<template>
  <mavon-editor
    id="mavon-editor"
    :value="value"
    :subfield="prop.subfield"
    :defaultOpen="prop.defaultOpen"
    :toolbarsFlag="prop.toolbarsFlag"
    :editable="prop.editable"
    :scrollStyle="prop.scrollStyle"
    boxShadowStyle
    ishljs
    transition
    previewBackground="#ffffff"
  ></mavon-editor>
</template>

<script>
export default {
  name: "PageDetail",
  data() {
    return {
      value: ``,
      attrs: {
        elevation: 2,
        loading: false,
      },
    };
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },
  props: ["arcticle"],
  mounted() {
    if (!this.arcticle) {
      console.log("当前不包含arcticle，正在加载..");
      this.$axios
        .get("/arcticle/getArcticleById/" + this.$route.query.arcticleID)
        .then((response) => {
          this.value = response.data.content;
        });
    } else {
      this.value = this.arcticle.content;
    }
  },
};
</script>

<style scoped>
.md {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
}

#mavon-editor {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
</style>